<template>
    <div id="app">
        <main class="app-main">
            <router-view></router-view>
        </main>

        <!-- <Loading></Loading> -->
        <!-- 加载老婆进来 -->
        <!-- <MyOnlyWife></MyOnlyWife> -->
    </div>
</template>

<script>
    // import Loading from '@/view/entry/Loading/Loading'
    // import MyOnlyWife from '@/view/entry/MyWife/MyWife.vue'
    export default {
        name: 'App',
        // components: { Loading, MyOnlyWife },

        async created() {
            let result = await this.$mock.getUserMenu()
            this.$store.commit('tab/setMenuList', result.data)
            this.handleRouterForamt(result.data)
        },

        mounted() {
            
        },

        methods: {
            handleRouterForamt(data,  parentPath = '', parentName = '') {
                 return data.map(item => {
                    return this.routeFormat(item, parentPath, parentName)
                }) 
            },

            /**
             *  利用动态添加路由的方式
             *  此权限更加直接避免用户通过路径直接进入页面
             *           
             *  这里发现一个奇妙的东西
             *  mock模拟的文件地址不能通过 @直接获得
             *  譬如模拟路径为          /views/xx/xxx   此时拼接 @ 在前面就会找不到文件路径         （失败）
             *  但是如果模拟路径为      views/xx/xxx    此时拼接 @/ 就不会出现找不到文件的情况      （成功）
             *  
             *  这里还有一点老狗一样的操作就是，TM的加子路由，不单单要在路径上添加父路由的路径 添加方法里面还要把父路由的name 加上
             */
            routeFormat({ path, name, pagehref, meta, children }, parentPath, parentName) {
                let newRouter = {
                    path: `${ parentPath }${ path }`,
                    name,
                    meta,
                    component: () => import(`@/${ pagehref }`)
                }
                if(parentName) {
                    this.$router.addRoute(parentName, newRouter)
                } else {
                    this.$router.addRoute(newRouter)
                }

                if(children && children != undefined) {
                    this.handleRouterForamt(children, path, name )
                }
            }
        }
    }

</script>

<style lang="scss">
    html, body {
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    #app {
        position: relative;
        height: 100vh;
        width: 100vw;
        overflow: hidden;

        .app-main {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
    }
</style>
